<!DOCTYPE HTML>
<html>

<head>
    <title>proton.js-render-custom</title>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: #333;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas id="testCanvas"></canvas>
    <script src="//localhost:3001/build/proton.js"></script>
    <script>
        var canvas;
        var context;
        var proton;
        var emitter;
        var pool;
        var id;

        main();

        function main() {
            id = 0;
            initCanvas();
            createProton();
            tick();
        }

        function initCanvas(){
            canvas = document.getElementById("testCanvas");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        function createProton() {
            proton = new Proton();

            emitter = new Proton.Emitter();
            emitter.rate = new Proton.Rate(3);

            emitter.addInitialize(new Proton.Mass(1));
            emitter.addInitialize(new Proton.Life(9));
            emitter.addInitialize(new Proton.Radius(200));
            emitter.addInitialize(new Proton.V(12, new Proton.Span(0, 360), 'polar'));

            emitter.addBehaviour(new Proton.Color('#666'));
            emitter.addBehaviour(new Proton.S(1, 0.2));
            zone = new Proton.RectZone(0, 0, window.innerWidth, window.innerHeight);
            emitter.addBehaviour(new Proton.CrossZone(zone, "bound"));
            emitter.addBehaviour(new Proton.Collision(emitter));

            emitter.p.x = window.innerWidth / 2;
            emitter.p.y = window.innerHeight / 2;

            proton.addEmitter(emitter);
            proton.addRenderer(createCustomRenderer());
            proton.addRenderer(new Proton.CanvasRenderer(canvas));

            emitter.emit("once");
        }

        function createCustomRenderer() {
            var renderer = new Proton.CustomRenderer();
            renderer.onParticleCreated = function (particle) {
                particle.i = 0;
            }

            renderer.onParticleUpdate = function (particle) {
                particle.i++;
                if (particle.i % 4 == 0) {
                    popup(particle);
                }
            }

            renderer.onParticleDead = function (particle) {
                particle.i = 0;
            }

            return renderer;
        }

        function popup(particle) {
            var w = parseInt(particle.radius * 2 * particle.scale);

            var p = window.open(
                './popup.html', 'popup_' + (id++),
                'height=' + w + ',width=' + w + ',left=' + parseInt(particle.p.x) + ',top=' + parseInt(particle.p.y) + ',toolbar=no,location=no,directories=0,status=0,menubar=0,scrollbars=0,resizable=0')

            setTimeout(function (p) { p.close() }, 800, p);
        }

        function tick() {
            requestAnimationFrame(tick);
            proton.update();
        }
    </script>
</body>

</html>